{% extends "youpu_base.html" %}
{% load static crispy_forms_tags thumbnail %}

{% block title %}{{ article.title|title }} - {{ block.super }}{% endblock %}

{% block content %}
    <!-- Page Content -->
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'youpu:news_list' %}">首页</a></li>
                <li class="breadcrumb-item"><a href="{% url 'youpu:articles_list' %}">文章</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ article.title|title }}</li>
            </ol>
        </nav>
        <div class="row">
            <!-- Post Content Column -->
            <div class="col-lg-8">
                <!-- Title -->
                <h2 class="text-center">{{ article.title|title }}</h2>
                <!-- Author -->
                <p class="text-left">
                    <a href="{% url 'youpu:users_detail' article.user.username %}">{{ article.user.get_profile_name }}</a>
                    发表于{{ article.created_at }}
                </p>
                <hr>
                <!-- 文章图片 -->
                {% thumbnail article.image "1920x1080" as im %}
                    <img src="{{ im.url }}" alt="文章图片" class="card-img-top">
                {% empty %}
                    <img class="img-fluid rounded" src="http://placehold.it/1920x1080" alt="Card Image">
                {% endthumbnail %}
                <hr>
                <!-- Post Content -->
                <p class="card-text">{{ article.get_markdown|safe }}</p>
                <hr>
                <!-- Comments Form -->
                <div class="card my-4"></div>
                <div class="media mb-4"></div>
            </div>

            <!-- Sidebar Widgets Column -->
            <div class="col-md-4">
                <!-- Write Article Widget -->
                {% if request.user.is_authenticated %}
                    <div class="card my-4">
                        <div class="card-body text-center">
                            <a class="btn btn-success" href="{% url 'youpu:articles_write_new' %}" title="写文章">
                                <i class="fa fa-pencil" aria-hidden="true"></i> 写文章</a>

                            {% if request.user.username == article.user.username %}
                                <a class="btn btn-primary" href="{% url 'youpu:articles_edit_article' article.id %}"
                                   title="编辑文章">
                                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑</a>
                            {% endif %}

                        </div>
                    </div>
                {% endif %}
                <!-- 云标签 -->
                <div class="card my-4">
                    <h5 class="card-header">云标签</h5>
                    <div class="card-body">
                        {% for tag in article.tags.all %}
                            <a href="#"><span class="badge badge-info">{{ tag }}</span></a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <div id="like-btn" style="position: fixed;right: 32%;top: 70% ">
        <div id="btn-img" style="border:2px solid black;">
            {% if request.user in article.get_likers %}
                <img src="{% static "img/afterUp.png" %}" class="like-btn-img" height="50px" alt="点赞按钮">
            {% else %}
                <img src="{% static "img/waitUp.png" %}" class="like-btn-img" height="50px" alt="点赞按钮">
            {% endif %}
        </div>
        <span style="position: fixed;right: 33%;top: 76% ">{{ article.count_likers }}</span>
    </div>
    <!-- /.container -->
{% endblock content %}

{% block js %}
    <script type="text/javascript">
        function getCookie(name) {
            if (document.cookie && document.cookie.length) {
                var cookies = document.cookie
                    .split(';')
                    .filter(function (cookie) {
                        return cookie.indexOf(name + "=") !== -1;
                    })[0];
                try {
                    return decodeURIComponent(cookies.trim().substring(name.length + 1));
                } catch (e) {
                    if (e instanceof TypeError) {
                        console.info("No cookie with key \"" + name + "\". Wrong name?");
                        return null;
                    }
                    throw e;
                }
            }
            return null;
        }

        function csrfSafeMethod(method) {
            // These HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        var csrftoken = getCookie('csrftoken');
        // This sets up every ajax call with proper headers.
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

        $("#like-btn").on("click", ".like-btn-img", function () {
            $.ajax({
                url: '{% url "youpu:articles_like_post" %}',
                data: {"articles":{{ article.id }}},
                type: 'POST',
                success: function (data) {
                    window.location.href = window.location.href
                    {#刷新页面，更新点赞状况#}
                }
            });
            return false;
        });
    </script>
{% endblock js %}